<template>
  <div v-if="show">
    <el-form label-position="top">
      <el-form-item v-if="data.type!=='grid'" label="字段标识">
        <el-input v-model="data.model" />
      </el-form-item>
      <el-form-item v-if="data.type!=='grid' && data.type!=='title' && data.type!=='divider' && data.type !== 'chart' && data.type !== 'report' && data.type !== 'button'" label="标题">
        <el-input v-model="data.name" />
      </el-form-item>
      <template v-if="data.type === 'button'">
        <el-form-item label="按钮文字">
          <el-input v-model="data.options.buttonName" />
        </el-form-item>
        <el-form-item label="按钮尺寸">
          <el-radio-group v-model="data.options.buttonSize">
            <el-radio-button label="medium">大</el-radio-button>
            <el-radio-button label="small">中</el-radio-button>
            <el-radio-button label="mini">小</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="按钮类型">
          <el-select v-model="data.options.buttonType" clearable placeholder="请选择按钮类型">
            <el-option
              v-for="type in buttonTypeList"
              :key="type.value"
              :label="type.value"
              :value="type.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="关联触发组件">
          <el-select v-model="data.options.bindList" clearable placeholder="请选择关联触发组件" multiple>
            <el-option
              v-for="option in buttonBindOptionList"
              :key="option.key"
              :label="option.name"
              :value="option.key"
            />
          </el-select>
        </el-form-item>
      </template>
      <template v-if="data.type !== 'grid' && data.type !== 'text' && data.type !== 'title' && data.type !== 'divider' && data.type !== 'chart' && data.type !== 'report' && data.type !== 'button'">
        <el-form-item v-if="data.type!=='grid' && data.type!=='title' && data.type!=='divider' && data.type !== 'chart' && data.type !== 'report' && data.type !== 'button'" label="绑定组件">
          <el-radio-group v-model="data.options.bindType" @change="handleBindTypeChange">
            <el-radio label="chart">图表</el-radio>
            <el-radio label="report">报表</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="data.options.bindType !== ''" label="选择组件">
          <el-select v-model="data.options.bindId" clearable placeholder="请选择组件" @change="handleBindIdChange">
            <el-option
              v-for="component in componentList"
              :key="component.bindId"
              :label="component.bindName"
              :value="component.bindId"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="data.options.bindId !== ''" label="选择字段">
          <el-select v-model="data.options.bindField" clearable placeholder="请选择字段">
            <el-option
              v-for="field in fieldList"
              :key="field.fieldId"
              :label="field.fieldName"
              :value="field.fieldName"
            />
          </el-select>
        </el-form-item>
      </template>
      <el-form-item v-if="data.type==='text'" label="文字内容">
        <el-input v-model="data.options.defaultValue" />
      </el-form-item>
      <el-form-item v-if="data.type==='title'" label="标题内容">
        <el-input v-model="data.options.defaultValue" />
      </el-form-item>
      <el-form-item v-if="data.type==='title'" label="布局方式">
        <el-radio-group v-model="data.options.position">
          <el-radio-button label="left">左对齐</el-radio-button>
          <el-radio-button label="center">居中</el-radio-button>
          <el-radio-button label="right">右对齐</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="Object.keys(data.options).indexOf('width')>=0" label="宽度(百分比)">
        <el-input v-model="data.options.width" />
      </el-form-item>

      <el-form-item v-if="Object.keys(data.options).indexOf('height')>=0" label="高度">
        <el-input v-model="data.options.height" />
      </el-form-item>

      <el-form-item v-if="Object.keys(data.options).indexOf('size')>=0" label="大小">
        宽度<el-input v-model.number="data.options.size.width" style="width: 90px;" type="number" />
        高度 <el-input v-model.number="data.options.size.height" style="width: 90px;" type="number" />
      </el-form-item>

      <el-form-item v-if="Object.keys(data.options).indexOf('placeholder')>=0 && (data.type!=='time' || data.type!=='date')" label="占位内容">
        <el-input v-model="data.options.placeholder" />
      </el-form-item>
      <el-form-item v-if="Object.keys(data.options).indexOf('inline')>=0" label="布局方式">
        <el-radio-group v-model="data.options.inline">
          <el-radio-button :label="false">块级</el-radio-button>
          <el-radio-button :label="true">行内</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="Object.keys(data.options).indexOf('showInput')>=0" label="显示输入框">
        <el-switch v-model="data.options.showInput" />
      </el-form-item>
      <el-form-item v-if="Object.keys(data.options).indexOf('min')>=0" label="最小值">
        <el-input-number v-model="data.options.min" :min="0" :max="100" :step="1" />
      </el-form-item>
      <el-form-item v-if="Object.keys(data.options).indexOf('max')>=0" label="最大值">
        <el-input-number v-model="data.options.max" :min="0" :max="100" :step="1" />
      </el-form-item>
      <el-form-item v-if="Object.keys(data.options).indexOf('step')>=0" label="步长">
        <el-input-number v-model="data.options.step" :min="0" :max="100" :step="1" />
      </el-form-item>
      <!--  <el-form-item v-if="data.type==='select'" label="是否多选">
        <el-switch v-model="data.options.multiple" @change="handleSelectMuliple" />
      </el-form-item>-->
      <el-form-item v-if="data.type==='select'" label="是否可搜索">
        <el-switch v-model="data.options.filterable" />
      </el-form-item>
      <el-form-item v-if="Object.keys(data.options).indexOf('allowHalf')>=0" label="允许半选">
        <el-switch
          v-model="data.options.allowHalf"
        />
      </el-form-item>
      <el-form-item v-if="Object.keys(data.options).indexOf('showAlpha')>=0" label="支持透明度选择">
        <el-switch
          v-model="data.options.showAlpha"
        />
      </el-form-item>
      <el-form-item v-if="Object.keys(data.options).indexOf('showLabel')>=0" label="是否显示标签">
        <el-switch
          v-model="data.options.showLabel"
        />
      </el-form-item>
      <el-form-item v-if="Object.keys(data.options).indexOf('options')>=0" label="选项">
        <!--        <el-radio-group v-model="data.options.remote" size="mini" style="margin-bottom:10px;">-->
        <!--          <el-radio-button :label="false">静态数据</el-radio-button>-->
        <!--          <el-radio-button :label="true">远端数据</el-radio-button>-->
        <!--        </el-radio-group>-->
        <template v-if="data.options.remote">
          <div>
            <el-input v-model="data.options.remoteFunc" size="mini" style="">
              <template slot="prepend">远端方法</template>
            </el-input>
            <el-input v-model="data.options.props.value" size="mini" style="">
              <template slot="prepend">值</template>
            </el-input>
            <el-input v-model="data.options.props.label" size="mini" style="">
              <template slot="prepend">标签</template>
            </el-input>
          </div>
        </template>
        <template v-else>
          <template v-if="data.type==='radio' || (data.type==='select'&&!data.options.multiple)">
            <el-radio-group v-model="data.options.defaultValue">
              <draggable
                tag="ul"
                :list="data.options.options"
                v-bind="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.drag-item'}"
                handle=".drag-item"
              >
                <li v-for="(item, index) in data.options.options" :key="index">
                  <el-radio
                    :label="item.value"
                    style="margin-right: 5px;"
                  >
                    <el-input v-model="item.value" :style="{'width': data.options.showLabel? '90px': '180px' }" size="mini" />
                    <el-input v-if="data.options.showLabel" v-model="item.label" style="width:90px;" size="mini" />
                    <!-- <input v-model="item.value"/> -->
                  </el-radio>
                  <i class="drag-item" style="font-size: 16px;margin: 0 5px;cursor: move;"><i class="iconfont icon-icon_bars" /></i>
                  <el-button circle plain type="danger" size="mini" icon="el-icon-minus" style="padding: 4px;margin-left: 5px;" @click="handleOptionsRemove(index)" />

                </li>
              </draggable>

            </el-radio-group>
          </template>

          <template v-if="data.type==='checkbox' || (data.type==='select' && data.options.multiple)">
            <el-checkbox-group v-model="data.options.defaultValue">

              <draggable
                tag="ul"
                :list="data.options.options"
                v-bind="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.drag-item'}"
                handle=".drag-item"
              >
                <li v-for="(item, index) in data.options.options" :key="index">
                  <el-checkbox
                    :label="item.value"
                    style="margin-right: 5px;"
                  >
                    <el-input v-model="item.value" :style="{'width': data.options.showLabel? '90px': '180px' }" size="mini" @input="checkboxInput()" />
                    <el-input v-if="data.options.showLabel" v-model="item.label" style="width:90px;" size="mini" />
                  </el-checkbox>
                  <i class="drag-item" style="font-size: 16px;margin: 0 5px;cursor: move;"><i class="iconfont icon-icon_bars" /></i>
                  <el-button circle plain type="danger" size="mini" icon="el-icon-minus" style="padding: 4px;margin-left: 5px;" @click="handleOptionsRemove(index)" />

                </li>
              </draggable>
            </el-checkbox-group>
          </template>
          <div style="margin-left: 22px;">
            <el-button type="text" @click="handleAddOption">添加选项</el-button>
          </div>
        </template>

      </el-form-item>

      <el-form-item v-if="data.type==='cascader'" label="远端数据">
        <div>
          <el-input v-model="data.options.remoteFunc" size="mini" style="">
            <template slot="prepend">远端方法</template>
          </el-input>
          <el-input v-model="data.options.props.value" size="mini" style="">
            <template slot="prepend">值</template>
          </el-input>
          <el-input v-model="data.options.props.label" size="mini" style="">
            <template slot="prepend">标签</template>
          </el-input>
          <el-input v-model="data.options.props.children" size="mini" style="">
            <template slot="prepend">子选项</template>
          </el-input>
        </div>
      </el-form-item>

      <el-form-item v-if="Object.keys(data.options).indexOf('defaultValue')>=0 && (data.type === 'textarea' || data.type === 'input' || data.type==='rate' || data.type==='color' || data.type==='switch')" label="默认值">
        <el-input v-if="data.type==='textarea'" v-model="data.options.defaultValue" type="textarea" :rows="5" />
        <el-input v-if="data.type==='input'" v-model="data.options.defaultValue" />
        <el-rate v-if="data.type === 'rate'" v-model="data.options.defaultValue" style="display:inline-block;vertical-align: middle;" :max="data.options.max" :allow-half="data.options.allowHalf" />
        <el-button v-if="data.type === 'rate'" type="text" style="display:inline-block;vertical-align: middle;margin-left: 10px;" @click="data.options.defaultValue=0">清空</el-button>
        <el-color-picker
          v-if="data.type === 'color'"
          v-model="data.options.defaultValue"
          :show-alpha="data.options.showAlpha"
        />
        <el-switch v-if="data.type==='switch'" v-model="data.options.defaultValue" />
      </el-form-item>

      <template v-if="data.type === 'time' || data.type === 'date'">
        <el-form-item v-if="data.type === 'date'" label="显示类型">
          <el-select v-model="data.options.type">
            <el-option value="year" />
            <el-option value="month" />
            <el-option value="date" />
            <el-option value="dates" />
            <!-- <el-option value="week"></el-option> -->
            <el-option value="datetime" />
            <el-option value="datetimerange" />
            <el-option value="daterange" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="data.type === 'time'" label="是否为范围选择">
          <el-switch
            v-model="data.options.isRange"
          />
        </el-form-item>
        <el-form-item v-if="data.type === 'date'" label="是否获取时间戳">
          <el-switch
            v-model="data.options.timestamp"
          />
        </el-form-item>
        <el-form-item v-if="(!data.options.isRange && data.type === 'time') || (data.type !== 'time' && data.options.type !== 'datetimerange' && data.options.type !== 'daterange')" label="占位内容">
          <el-input v-model="data.options.placeholder" />
        </el-form-item>
        <el-form-item v-if="(data.options.isRange) || data.options.type==='datetimerange' || data.options.type==='daterange'" label="开始时间占位内容">
          <el-input v-model="data.options.startPlaceholder" />
        </el-form-item>
        <el-form-item v-if="data.options.isRange || data.options.type==='datetimerange' || data.options.type==='daterange'" label="结束时间占位内容">
          <el-input v-model="data.options.endPlaceholder" />
        </el-form-item>
        <el-form-item label="格式">
          <el-input v-model="data.options.format" />
        </el-form-item>
        <el-form-item v-if="data.type==='time' && Object.keys(data.options).indexOf('isRange')>=0" label="默认值">
          <el-time-picker
            v-if="!data.options.isRange"
            key="1"
            v-model="data.options.defaultValue"
            style="width: 100%;"
            :arrow-control="data.options.arrowControl"
            :value-format="data.options.format"
          />
          <el-time-picker
            v-if="data.options.isRange"
            key="2"
            v-model="data.options.defaultValue"
            style="width: 100%;"
            is-range
            :arrow-control="data.options.arrowControl"
            :value-format="data.options.format"
          />
        </el-form-item>
      </template>

      <template v-if="data.type==='blank'">
        <el-form-item label="绑定数据类型">
          <el-select v-model="data.options.defaultType">
            <el-option value="String" label="字符串" />
            <el-option value="Object" label="对象" />
            <el-option value="Array" label="数组" />
          </el-select>
        </el-form-item>
      </template>

      <template v-if="data.type === 'grid'">
        <el-form-item label="栅格间隔">
          <el-input v-model.number="data.options.gutter" type="number" />
        </el-form-item>
        <el-form-item label="列配置项">
          <draggable
            tag="ul"
            :list="data.columns"
            v-bind="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.drag-item'}"
            handle=".drag-item"
          >
            <li v-for="(item, index) in data.columns" :key="index">
              <i class="drag-item" style="font-size: 16px;margin: 0 5px;cursor: move;"><i class="iconfont icon-icon_bars" /></i>
              <el-input-number v-model.number="item.span" placeholder="栅格值" size="mini" controls-position="right" :min="1" :max="24" />

              <el-button circle plain type="danger" size="mini" icon="el-icon-minus" style="padding: 4px;margin-left: 5px;" @click="handleOptionsRemove(index)" />

            </li>
          </draggable>
          <div style="margin-left: 22px;">
            <el-button type="text" @click="handleAddColumn">添加列</el-button>
          </div>
        </el-form-item>
        <el-form-item label="水平排列方式">
          <el-select v-model="data.options.justify">
            <el-option value="start" label="左对齐" />
            <el-option value="end" label="右对齐" />
            <el-option value="center" label="居中" />
            <el-option value="space-around" label="两侧间隔相等" />
            <el-option value="space-between" label="两端对齐" />
          </el-select>
        </el-form-item>
        <el-form-item label="垂直排列方式">
          <el-select v-model="data.options.align">
            <el-option value="top" label="顶部对齐" />
            <el-option value="middle" label="居中" />
            <el-option value="bottom" label="底部对齐" />
          </el-select>
        </el-form-item>
      </template>

      <!--<template v-if="data.type !== 'grid' && data.type !== 'text' && data.type !== 'title' && data.type !== 'divider' && data.type !== 'chart' && data.type !== 'report'">
        <el-form-item label="操作属性">
          <el-checkbox v-if="Object.keys(data.options).indexOf('readonly')>=0" v-model="data.options.readonly">完全只读</el-checkbox>
          <el-checkbox v-if="Object.keys(data.options).indexOf('disabled')>=0" v-model="data.options.disabled">禁用	</el-checkbox>
          <el-checkbox v-if="Object.keys(data.options).indexOf('editable')>=0" v-model="data.options.editable">文本框可输入</el-checkbox>
          <el-checkbox v-if="Object.keys(data.options).indexOf('clearable')>=0" v-model="data.options.clearable">显示清除按钮 </el-checkbox>
          <el-checkbox v-if="Object.keys(data.options).indexOf('arrowControl')>=0" v-model="data.options.arrowControl">使用箭头进行时间选择</el-checkbox>
          <el-checkbox v-if="Object.keys(data.options).indexOf('isDelete')>=0" v-model="data.options.isDelete">删除</el-checkbox>
          <el-checkbox v-if="Object.keys(data.options).indexOf('isEdit')>=0" v-model="data.options.isEdit">编辑</el-checkbox>

        </el-form-item>
        <el-form-item v-if="data.type !== 'imgupload' && data.type !== 'title' && data.type !== 'divider'" label="校验">
          <div v-if="Object.keys(data.options).indexOf('required')>=0">
            <el-checkbox v-model="data.options.required">必填</el-checkbox>
          </div>
          <el-select v-if="Object.keys(data.options).indexOf('dataType')>=0" v-model="data.options.dataType" size="mini">
            <el-option value="string" label="字符串" />
            <el-option value="number" label="数字" />
            &lt;!&ndash; <el-option value="boolean" label="布尔值" />
            <el-option value="integer" label="整数" />
            <el-option value="float" label="浮点数" />
            <el-option value="url" label="URL地址" />
            <el-option value="email" label="邮箱地址" />
            <el-option value="hex" label="十六进制" />&ndash;&gt;
          </el-select>

          <div v-if="Object.keys(data.options).indexOf('pattern')>=0">
            <el-input v-model.lazy="data.options.pattern" size="mini" style=" width: 240px;" placeholder="填写正则表达式" />
          </div>
        </el-form-item>
      </template>-->

      <el-form-item v-if="data.type==='title'" label="字体大小">
        <el-input-number v-model.number="data.options.fontSize" placeholder="字体大小" size="mini" controls-position="right" :min="1" :max="2000" />
      </el-form-item>
      <el-form-item v-if="data.type==='title'" label="字体颜色">
        <el-color-picker
          v-model="data.options.fontColor"
        />
      </el-form-item>
      <el-form-item v-if="data.type==='chart'" label="图表高度">
        <el-input-number v-model.number="data.options.chartHeight" placeholder="图表高度" size="mini" controls-position="right" :min="1" :max="2000" />
      </el-form-item>
      <template v-if="data.type === 'chart'">
        <el-form-item label="选择图表">
          <div class="temp-list-container">
            <div class="handle-container">
              <el-input
                v-model="chartListQuery.instanceTitle_LIKE"
                size="mini"
                clearable
                suffix-icon="el-icon-search"
                @change="handleFilterChart"
                @keyup.enter.native="handleFilterChart"
              />
            </div>
            <el-menu
              default-active="0"
              class="temp-menu-list"
              active-text-color="#d2deef"
              @select="handleChooseInstance"
            >
              <el-menu-item
                v-for="instance in chartResultList"
                :key="instance.instanceId"
                v-loading="chartLoading"
                :index="String(instance.InstanceId)"
              >
                <div class="temp-menu-item-thumbnails">
                  <img :src="instance.InstanceViewImg" class="image" alt="">
                </div>
                <p class="temp-menu-item-title">{{ instance.InstanceTitle }}</p>
              </el-menu-item>
              <el-main style="text-align: center">
                <el-button v-if="chartLoadMore" type="text" style="font-size: 14px;color: #000000;" @click="loadMoreChartList()">加载更多<i class="el-icon-arrow-down" /></el-button>
              </el-main>
            </el-menu>
          </div>
        </el-form-item>
      </template>
      <el-form-item v-if="data.type==='report'" label="报表高度">
        <el-input-number v-model.number="data.options.reportHeight" placeholder="报表高度" size="mini" controls-position="right" :min="1" :max="2000" />
      </el-form-item>
      <template v-if="data.type === 'report'">
        <el-form-item label="选择报表">
          <div class="temp-list-container">
            <div class="handle-container">
              <el-input
                v-model="reportListQuery.reportName_LIKE"
                size="mini"
                clearable
                suffix-icon="el-icon-search"
                @change="handleFilterReport"
                @keyup.enter.native="handleFilterReport"
              />
            </div>
            <el-menu
              default-active="0"
              class="temp-menu-list"
              active-text-color="#d2deef"
              @select="handleChooseReport"
            >
              <el-menu-item
                v-for="report in reportResultList"
                :key="report.reportId"
                v-loading="reportLoading"
                :index="String(report.reportId)"
              >
                <div class="temp-menu-item-thumbnails-report">
                  <img src="@/assets/report/report.png" alt="">
                </div>
                <p class="temp-menu-item-title">{{ report.reportName }}</p>
              </el-menu-item>
              <el-main style="text-align: center">
                <el-button v-if="reportLoadMore" type="text" style="font-size: 14px;color: #000000;" @click="loadMoreReportList()">加载更多<i class="el-icon-arrow-down" /></el-button>
              </el-main>
            </el-menu>
          </div>
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>

<script>
import Draggable from 'vuedraggable'
import { getInstancePage } from '@/api/developer/data_view/Instance'
import { getPage, getReportUrl } from '@/api/developer/ReportFile'
import { getParameter } from '@/api/developer/ReportParameter'

export default {
  components: {
    Draggable
  },
  props: ['data', 'all'],
  data() {
    return {
      validator: {
        type: null,
        required: null,
        pattern: null,
        range: null,
        length: null
      },
      // 图表相关
      chartTotal: null,
      chartList: [],
      chartListQuery: {
        page: 1,
        size: 10,
        createTime_DESC: true,
        instanceTitle_LIKE: null
      },
      chartResultList: [],
      chartLoadMore: true,
      chartListMore: [],
      chartListItemCount: 0,
      chartCollapse: false,
      chartLoading: false,
      // 报表相关
      reportTotal: null,
      reportList: [],
      reportListQuery: {
        page: 1,
        size: 10,
        createTime_DESC: true,
        reportName_LIKE: null
      },
      reportResultList: [],
      reportLoadMore: true,
      reportListMore: [],
      reportListItemCount: 0,
      reportCollapse: false,
      reportLoading: false,
      componentList: [],
      fieldList: [],
      buttonTypeList: [
        {
          value: 'primary'
        },
        {
          value: 'success'
        },
        {
          value: 'info'
        },
        {
          value: 'warning'
        },
        {
          value: 'danger'
        }
      ],
      buttonBindOptionList: []
    }
  },
  computed: {
    show() {
      if (this.data && Object.keys(this.data).length > 0) {
        return true
      }
      return false
    }
  },
  watch: {
    'data.options.isRange': function(val) {
      if (typeof val !== 'undefined') {
        if (val) {
          this.data.options.defaultValue = null
        } else {
          if (Object.keys(this.data.options).indexOf('defaultValue') >= 0) { this.data.options.defaultValue = '' }
        }
      }
    },
    'data.options.required': function(val) {
      this.validateRequired(val)
    },
    'data.options.dataType': function(val) {
      this.validateDataType(val)
    },
    'data.options.pattern': function(val) {
      this.valiatePattern(val)
    },
    'data.name': function(val) {
      if (this.data.options) {
        this.validateRequired(this.data.options.required)
        this.validateDataType(this.data.options.dataType)
        this.valiatePattern(this.data.options.pattern)
      }
    },
    'data.type': function(val) {
      if (val !== undefined) {
        if (val !== 'chart' && val !== 'report' && val !== 'button') {
          if (this.data.options.bindType !== '') {
            this.handleBindTypeChange(this.data.options.bindType)
          }
        }
        if (val === 'button') {
          this.handleButtonBindList()
        }
      }
    }
  },
  created() {
    this.getChartPage()
    this.getReportPage()
  },
  methods: {
    handleOptionsRemove(index) {
      if (this.data.type === 'grid') {
        this.data.columns.splice(index, 1)
      } else {
        if (this.data.options.defaultValue === this.data.options.options[index].value) {
          this.data.options.defaultValue = ''
        }
        this.data.options.options.splice(index, 1)
      }
    },
    handleAddOption() {
      if (this.data.options.showLabel) {
        this.data.options.options.push({
          value: '新选项',
          label: '新标签'
        })
      } else {
        this.data.options.options.push({
          value: '新选项'
        })
      }
    },
    handleAddColumn() {
      this.data.columns.push({
        span: '',
        list: []
      })
    },
    generateRule() {
      this.data.rules = []
      Object.keys(this.validator).forEach(key => {
        if (this.validator[key]) {
          this.data.rules.push(this.validator[key])
        }
      })
    },
    handleSelectMuliple(value) {
      if (value) {
        if (this.data.options.defaultValue) {
          this.data.options.defaultValue = [this.data.options.defaultValue]
        } else {
          this.data.options.defaultValue = []
        }
      } else {
        if (this.data.options.defaultValue.length > 0) {
          this.data.options.defaultValue = this.data.options.defaultValue[0]
        } else {
          this.data.options.defaultValue = ''
        }
      }
    },

    validateRequired(val) {
      if (val) {
        this.validator.required = { required: true, message: `${this.data.name}必须填写` }
      } else {
        this.validator.required = null
      }

      this.$nextTick(() => {
        this.generateRule()
      })
    },

    validateDataType(val) {
      if (!this.show) {
        return false
      }

      if (val) {
        this.validator.type = { type: val, message: this.data.name + '格式不正确' }
      } else {
        this.validator.type = null
      }

      this.generateRule()
    },
    valiatePattern(val) {
      if (!this.show) {
        return false
      }

      if (val) {
        this.validator.pattern = { pattern: val, message: this.data.name + '格式不匹配' }
      } else {
        this.validator.pattern = null
      }

      this.generateRule()
    },
    checkboxInput() {
      this.data.options.defaultValue = []
    },
    // 图表相关
    getChartPage() {
      this.chartLoading = true
      getInstancePage(this.chartListQuery).then(response => {
        this.chartList = response.data.records
        this.chartTotal = response.data.total
        this.chartResultList = this.chartList
        this.chartListItemCount = this.chartList.length
        if (this.chartTotal <= 10) {
          this.chartLoadMore = false
        }
        this.chartLoading = false
      })
    },
    loadMoreChartList() {
      this.chartLoading = true
      this.chartCollapse = true
      this.chartListQuery.page = this.chartListQuery.page + 1
      getInstancePage(this.chartListQuery).then(response => {
        this.chartList = response.data.records
        this.chartResultList = this.chartResultList.concat(this.chartList)
        this.chartListItemCount = this.chartResultList.length
        if (this.chartListItemCount === this.chartTotal) {
          this.chartLoadMore = false
        }
        this.chartLoading = false
      })
    },
    collapseAllChart() {
      this.chartResultList = this.chartResultList.slice(0, 10)
      this.chartCollapse = false
      this.chartLoadMore = true
      this.chartListQuery.page = 1
      this.chartListItemCount = this.chartResultList.length
    },
    handleFilterChart() {
      this.chartListQuery.page = 1
      this.chartCollapse = false
      this.chartLoadMore = true
      this.getChartPage()
    },
    handleChooseInstance(key, keyPath) {
      for (let i = 0; i < this.chartList.length; i++) {
        const screenInstance = this.chartList[i]
        if (String(screenInstance.InstanceId) === key) {
          this.data.options.chartId = screenInstance.InstanceId
          this.data.options.chartName = screenInstance.InstanceTitle
          this.data.options.chartUrl = screenInstance.InstanceViewImg
        }
      }
    },
    // 报表相关
    getReportPage() {
      this.reportLoading = true
      getPage(this.reportListQuery).then(response => {
        this.reportList = response.data.records
        this.reportTotal = response.data.total
        this.reportResultList = this.reportList
        this.reportListItemCount = this.reportList.length
        if (this.reportTotal <= 10) {
          this.reportLoadMore = false
        }
        this.reportLoading = false
      })
    },
    loadMoreReportList() {
      this.reportLoading = true
      this.reportCollapse = true
      this.reportListQuery.page = this.reportListQuery.page + 1
      getPage(this.reportListQuery).then(response => {
        this.reportList = response.data.records
        this.reportResultList = this.reportResultList.concat(this.reportList)
        this.reportListItemCount = this.reportResultList.length
        if (this.reportListItemCount === this.reportTotal) {
          this.reportLoadMore = false
        }
        this.reportLoading = false
      })
    },
    collapseAllReport() {
      this.reportResultList = this.reportResultList.slice(0, 10)
      this.reportCollapse = false
      this.reportLoadMore = true
      this.reportListQuery.page = 1
      this.reportListItemCount = this.reportResultList.length
    },
    handleFilterReport() {
      this.reportListQuery.page = 1
      this.reportCollapse = false
      this.reportLoadMore = true
      this.getReportPage()
    },
    handleChooseReport(key, keyPath) {
      for (let i = 0; i < this.reportList.length; i++) {
        const report = this.reportList[i]
        if (String(report.reportId) === key) {
          this.data.options.reportId = report.reportId
          this.data.options.reportName = report.reportName
          this.data.options.reportUrl = getReportUrl() + 'ureport/preview?_u=ninelock-' + report.reportName
        }
      }
    },
    handleBindTypeChange(val) {
      this.componentList = []
      // 处理选中的组件列表
      if (val === 'chart') {
        // 处理图表组件列表
        this.all.forEach((item) => {
          if (item.type === 'chart') {
            if (item.options.chartId !== '') {
              const param = {
                bindId: item.options.chartId,
                bindName: item.options.chartName,
                bindUrl: item.options.chartUrl
              }
              this.componentList.push(param)
            }
          } else if (item.type === 'grid') {
            // 遍历栅格中是否存在图表元素
            if (item.columns.length > 0) {
              item.columns.forEach((column) => {
                if (column.list.length > 0) {
                  column.list.forEach((component) => {
                    if (component.type === 'chart') {
                      const param = {
                        bindId: component.options.chartId,
                        bindName: component.options.chartName,
                        bindUrl: component.options.chartUrl
                      }
                      this.componentList.push(param)
                    }
                  })
                }
              })
            }
          }
        })
      } else {
        // 处理报表组件列表
        this.all.forEach((item) => {
          if (item.type === 'report') {
            if (item.options.reportId !== '') {
              const param = {
                bindId: item.options.reportId,
                bindName: item.options.reportName,
                bindUrl: item.options.reportUrl
              }
              this.componentList.push(param)
            }
          } else if (item.type === 'grid') {
            // 遍历栅格中是否存在报表元素
            if (item.columns.length > 0) {
              item.columns.forEach((column) => {
                if (column.list.length > 0) {
                  column.list.forEach((component) => {
                    if (component.type === 'report') {
                      const param = {
                        bindId: component.options.reportId,
                        bindName: component.options.reportName,
                        bindUrl: component.options.reportUrl
                      }
                      this.componentList.push(param)
                    }
                  })
                }
              })
            }
          }
        })
      }
    },
    handleBindIdChange(val) {
      this.fieldList = []
      if (this.data.options.bindType === 'chart') {
        // 获取该图表的查询字段列表
      } else {
        // 获取该报表的参数字段列表
        const param = { reportId: val }
        getParameter(param).then(response => {
          if (response.code === 200) {
            if (response.data.length > 0) {
              response.data.forEach((item) => {
                const param = {
                  fieldId: item.reportParameterId,
                  fieldName: item.parameterName
                }
                this.fieldList.push(param)
              })
            }
          } else {
            this.$message({
              message: response.msg,
              type: 'error'
            })
          }
        })
      }
    },
    handleButtonBindList() {
      this.buttonBindOptionList = []
      this.all.forEach((item) => {
        if (item.type !== 'chart' && item.type !== 'report' && item.type !== 'button' && item.type !== 'title' && item.type !== 'divider') {
          if (item.type === 'grid') {
            if (item.columns.length > 0) {
              item.columns.forEach((column) => {
                if (column.list.length > 0) {
                  column.list.forEach((component) => {
                    if (component.type !== 'chart' && component.type !== 'report' && component.type !== 'button' && component.type !== 'title' && component.type !== 'divider') {
                      this.buttonBindOptionList.push(component)
                    }
                  })
                }
              })
            }
          } else {
            this.buttonBindOptionList.push(item)
          }
        }
      })
    }
  }
}
</script>

<style>
  .temp-list-container .temp-menu-list .el-menu-item {
    height: 225px;
    cursor: pointer;
    padding: 20px 0 !important;
    list-style-type: none;
  }

  .temp-list-container .temp-menu-list .el-menu-item .temp-menu-item-thumbnails {
    height: 150px;
    width: 100%;
    background: #cacddc;
    margin: 0;
  }

  .temp-list-container .temp-menu-list .el-menu-item .temp-menu-item-thumbnails img {
    width: 100%;
    height: 100%;
  }
</style>
